import {boardSize, pieces, selection} from "./Data.js";


// 封装显示模态框的函数
function showGameResultModal(winner) {
    let myModal = new bootstrap.Modal(document.getElementById('gameResultModal'));

    // 根据获胜方设置消息
    let winnerMessageElement = document.getElementById('winnerMessage');
    if (winner === 'black') {
        winnerMessageElement.textContent = '恭喜黑方，赢得了本次对战！';
    } else if (winner === 'red') {
        winnerMessageElement.textContent = '恭喜红方，赢得了本次对战！';
    } else {
        winnerMessageElement.textContent = '本次对战结束！';
    }

    // 显示模态框
    myModal.show();
}

// 封装关闭模态框的函数
function hideGameResultModal() {
    var myModal = bootstrap.Modal.getInstance(document.getElementById('gameResultModal'));
    if (myModal) {
        myModal.hide();
    }
}
//  渲染棋局
// 棋盘和棋子 渲染
function RenderGame(PiecesData, handlePieceClick) {
    // 删除
    for (let elementsByClassNameElement of document.querySelectorAll(".piece")) {
        elementsByClassNameElement.remove();
    }
    let chessboard = document.getElementById('chessboard');
    // 渲染棋子
    PiecesData.forEach(piece => {
        let pieceElement = document.createElement('div');
        pieceElement.className = 'piece';
        pieceElement.style.backgroundImage = `url(${pieces[piece.type][piece.color]})`;
        //设置位置
        pieceElement.style.left = `${piece.x * (pieces.cellSize - pieces.pieceSize / 2) + boardSize.widthInitBoundaryDistance}px`;
        pieceElement.style.top = `${piece.y * (pieces.cellSize - pieces.pieceSize / 2) + boardSize.heightInitBoundaryDistance}px`;

        pieceElement.dataset.x = piece.x;
        pieceElement.dataset.y = piece.y;
        pieceElement.dataset.type = piece.type;
        pieceElement.dataset.color = piece.color;
        pieceElement.addEventListener('click', ev => handlePieceClick(ev));
        chessboard.appendChild(pieceElement);
    });
}

// 选择棋子时棋子的框渲染
function RenderChessPieceSelectionBox(color, x, y) {
    // 移除之前的选择框
    for (let selectionBox of document.querySelectorAll('.selection-box')) {
        selectionBox.remove();
    }
    // 创建选择框
    const selectionBox = document.createElement('div');
    selectionBox.className = 'selection-box';
    selectionBox.style.backgroundImage = color === "black" ? `url(${selection.BLACK_box})` : `url(${selection.RED_box})`;

    selectionBox.style.left = `${x * (pieces.cellSize - pieces.pieceSize / 2) + boardSize.widthInitBoundaryDistance}px`;
    selectionBox.style.top = `${y * (pieces.cellSize - pieces.pieceSize / 2) + boardSize.heightInitBoundaryDistance}px`;

    selectionBox.addEventListener('click', () => {
        // 移除之前的选择框
        for (let selectionBox of document.querySelectorAll('.selection-box')) {
            selectionBox.remove();
        }
        //盘标记点
        for (let markBox of document.querySelectorAll('.mark-box')) {
            markBox.remove();
        }
    });

}

// 盘标记点
// 渲染棋盘标记点
function renderBoardMarks(type, color, x, y, possibleMoves, possibleMovesEventListener) {
    //盘标记点
    for (let markBox of document.querySelectorAll('.mark-box')) {
        markBox.remove();
    }
    let chessboard = document.getElementById('chessboard');

    possibleMoves.forEach(move => {
        let mark = document.createElement('div');
        mark.dataset.x = move.x;
        mark.dataset.y = move.y;
        mark.className = 'mark-box';
        mark.style.left = `${move.x * (pieces.cellSize - pieces.pieceSize / 2) + boardSize.widthInitBoundaryDistance}px`;
        mark.style.top = `${move.y * (pieces.cellSize - pieces.pieceSize / 2) + boardSize.heightInitBoundaryDistance}px`;
        mark.addEventListener('click', ev => possibleMovesEventListener(move.x, move.y));
        chessboard.appendChild(mark);
    });
}


export {
     showGameResultModal, RenderGame, RenderChessPieceSelectionBox, renderBoardMarks, hideGameResultModal
}